<template>
    <div class="page">
        <a-form class="form">
            <lo-select class="form-item"  v-model:value="tableQuery.enableStatus" @change="pageChange(1)"
                :options="[
                    {label: '全部', value: ''},
                    {label: '停用', value: '00'},
                    {label: '启用', value: '01'},
                ]"
                placeholder="启用/停用"></lo-select>
            <a-input class="form-item" v-model:value="tableQuery.keyWord" placeholder="关键词搜索"></a-input>
            <a-button class="form-btn" @click="pageChange(1)" type="primary">查询</a-button>
        </a-form>
        <div class="page_content flex-column">
            <div class="table_tool mar-b10">
                <lo-button size="small" type="primary" color="success" @click="editAccountFn('open')">+新增账户</lo-button>
            </div>
            <div class="flex-1">
                <table-container v-slot="{containerHeight}">
                    <lo-table
                        :columns="tableColmun"
                        :dataSource="tableData"
                        :height="containerHeight">
                        <template #bodyCell="{column, record}">
                            <template v-if="column.dataIndex == 'op'">
                                <lo-button @click="editAccountFn('open', record)" class="mar-r10"  size="small" color="primary">编辑</lo-button>
                            </template>
                        </template>
                    </lo-table>
                </table-container>
            </div>
            <div class="pager">
                <a-pagination
                    @change="pageChange"
                    v-model:current="tablePager.index"
                    :pageSize="tablePager.size"
                    :total="tablePager.total"
                    :showSizeChanger="false"/>
            </div>
        </div>
        <lo-modal
            title="新增/修改账户"
            width="600px"
            ref="editAccountRef" @confirm="editAccountFn('confirm')">
            <div>
                <a-form :label-col="{style: { width: '100px' }}">
                    <a-form-item label="姓名：">
                        <a-input v-model:value="accountItem.userName" placeholder="姓名" />
                    </a-form-item>
                    <a-form-item label="角色：">
                        <lo-select
                            v-model:value="accountItem.roleStrIds"
                            :options="roleList"
                            placeholder="选择角色"
                            mode="multiple" noborder></lo-select>
                    </a-form-item>
                    <a-form-item label="停/启用：">
                        <lo-select v-model:value="accountItem.enableStatus"
                            :options="[
                                {label: '停用', value: '00'},
                                {label: '启用', value: '01'},
                            ]"
                            placeholder="选择角色" noClear noborder></lo-select>
                    </a-form-item>
                    <a-form-item label="账号：">
                        <a-input v-model:value="accountItem.userAccount" placeholder="账号" :disabled="!!accountItem.id" />
                    </a-form-item>
                    <a-form-item label="密码：">
                        <a-input v-model:value="accountItem.userPwd" placeholder="填写则修改密码" />
                    </a-form-item>
                </a-form>

            </div>
        </lo-modal>

        <lo-modal title="绑定二维码" width="400px" :showButton="false" ref="bindGZHRef">
            <div class="wfull pad20 flex-center">
                <QRCode :size="300" :value="bindGZHCode" />
            </div>
        </lo-modal>
    </div>
</template>

<script lang="jsx" setup>
    import { ref, onMounted, onActivated, nextTick } from 'vue'
    import { getSysUsers, editSysUser, getSysRoles } from '@/api/system'
    import md5 from 'js-md5'
    import { useStore } from 'vuex'
    const Store  = useStore()

    onMounted(() => {
        getAccountList()
    })



    // ************ account list ************
    const tableQuery = ref({
        enableStatus: '01',
        keyWord: ''
    })
    const tableColmun = ref([
        { title: '序号', type: 'index', },
        { title: '账号', dataIndex: 'userAccount', width: '160px'  },
        { title: '姓名', dataIndex: 'userName',  width: '160px' },
        { title: '停/启用', dataIndex: 'enableStatus',  width: '80px', customRender: ({ record }) => ( <span> { record.enableStatus == '01' ? '启用' : '停用' } </span> ) },
        { title: '角色', dataIndex: 'roleStrIds', customRender: ({ record }) => ( <span> { (record.roleNames || []).map(i => i.roleName).join(',')} </span> ) },
        { title: '操作', dataIndex: 'op', width: '100px' },
    ])
    const tablePager = ref({
        index: 1,
        total: 0,
        size: 30
    })
    const tableData = ref([ ])
    function pageChange(e) {
        tablePager.value.index = e
        setTimeout(getAccountList)
    }
    function getAccountList() {
        getSysUsers({
            keyWord: tableQuery.value.keyWord,
            enableStatus: tableQuery.value.enableStatus,
            pageIndex: tablePager.value.index,
            pageSize: tablePager.value.size
        }).then(res => {
            tableData.value = res.data.list
            tablePager.value.total = +res.data.total
        })
    }


    // ************ edit account ************

    const editAccountRef = ref(null)
    const ACCOUNT_ITEM = {
        id: '',
        userName: '',
        roleStrIds: [],
        enableStatus: '01',
        userAccount: '',
        userPwd: '',
        perLevel: '',
        belongLevel: '',
    }
    const accountItem = ref({ ...ACCOUNT_ITEM })
    function editAccountFn(type, row) {
        if(type == 'open') {
            editAccountRef.value.open()
            if(row) {
                accountItem.value = {
                    ...row,
                    roleStrIds: row.roleNames.map(i => i.roleId)
                }
            } else {
                accountItem.value = {
                    id: '',
                    ...ACCOUNT_ITEM
                }
            }
            getRoleList()
        } else if(type == 'close') {
            editAccountRef.value.close()
        } else if(type == 'confirm') {
            let data = {
                id: accountItem.value.id,
                userName: accountItem.value.userName,
                roleStrIds: accountItem.value.roleStrIds.join(','),
                enableStatus: accountItem.value.enableStatus,
                userAccount: accountItem.value.userAccount,
                userPwd: accountItem.value.userPwd && md5(accountItem.value.userPwd) || '',
                perLevel: accountItem.value.perLevel,
                belongLevel: accountItem.value.belongLevel
            }
            if(!data.roleStrIds) return $global.message.warning('请选择角色')
            if(!data.userAccount) return $global.message.warning('请输入登录账户')
            if(!data.id) {
                if(!data.userPwd) return $global.message.warning('请输入登录密码')
            }

            editSysUser(data).then(res => {
                $global.message.success(res.msg)
                editAccountFn('close')
                pageChange(1)
            })
        }
    }

    const roleList = ref([])
    function getRoleList() {
        getSysRoles().then(res => {
            let list = res.data && res.data.map(i => ({
                label: i.roleName,
                value: i.id,
            }))
            roleList.value = list
        })
    }

</script>

<style lang="less" scoped>

</style>
